<!--
* @description 查看某个预算审核项目详细
* @fileName index.vue
* @author zero_fsc
* @date 2020/05/19 16:21:12
!-->
<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 搜索模块 -->
      <div class="yl-search-list">
        <el-form :model="searchConfig" ref="searchConfig" :inline="true">
          <el-form-item>
            <el-select v-model="searchConfig.department" placeholder="请选择系别" size="small">
              <el-option
                v-for="(item, index) in departments"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchConfig.kind" placeholder="请选择项目类型" size="small">
              <el-option
                v-for="(item, index) in kinds"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <YlButton uiType="plain" icon="el-icon-search" @click="initData(false)">搜 索</YlButton>
            <YlButton uiType="plain" btnType="danger" icon="iconfont yl-ecs-zhongzhi yl-icon" @click="initTree(false)">重 置</YlButton>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据显示 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          row-key="nns_code"
          default-expand-all
          :tree-props="{ children: 'nns_children' }"
          :data="tableData"
          height="700"
        >
          <el-table-column label="项目编号" prop="nns_code" width="200" show-overflow-tooltip></el-table-column>

          <el-table-column label="项目名字" prop="nns_name" show-overflow-tooltip></el-table-column>

          <el-table-column label="项目类型" align="center">
            <template slot-scope="{row}">
              <span v-if="row.nns_kind === 1">行政</span>
              <span v-else-if="row.nns_kind === 2">教学</span>
              <span v-else>通用</span>
            </template>
          </el-table-column>

          <el-table-column label="项目所属状态个数" align="center">
            <el-table-column label="待提交" align="center" prop="nns_no_submit_num"></el-table-column>
            <el-table-column label="待审核" align="center" prop="nns_wait_audit_num"></el-table-column>
            <el-table-column label="审核中" align="center" prop="nns_auditing_num"></el-table-column>
            <el-table-column label="通过" align="center" prop="nns_pass_num"></el-table-column>
            <el-table-column label="驳回" align="center" prop="nns_reject_num"></el-table-column>
          </el-table-column>

          <el-table-column label="金额" show-overflow-tooltip >
            <template slot-scope="{row}">
              <span>{{ showMoney(row.nns_money) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="审核状态" align="center">
            <template slot-scope="{row}">
              <span v-if="row.nns_state === 0" class="warning">待提交</span>
              <span v-else-if="row.nns_state === 1" class="warning">待审核</span>
              <span v-else-if="row.nns_state === 2" class="primary">一审通过</span>
              <span v-else-if="row.nns_state === 3" class="success">二审通过</span>
              <span v-else-if="row.nns_state === 4" class="success">三审通过</span>
              <span v-else-if="row.nns_state === 5" class="danger">已驳回</span>
              <span v-else-if="row.nns_state === 6" class="info">已取消</span>
              <span v-else></span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="{row}">
              <YlButton
                uiType="main"
                icon="el-icon-edit-outline"
                v-if="row.nns_show_audit_button && row.nns_show_audit_button === 1"
                @click="goToWritePage(row.nns_id, row.nns_state, false)"
              >
                <span>审核</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="success"
                icon="el-icon-view"
                v-if="row.nns_show_info_button && row.nns_show_info_button === 1"
                @click="goToWritePage(row.nns_id, row.nns_state, true)"
              >
                <span>查看详情</span>
              </YlButton>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  initSelectValue,
  cardFormConfigValue
} from '@/middleware'
import {
  getPrjState,
  getProjectKind
} from '@/utils/prjState'
export default {
  data () {
    return {
      loading: false,
      searchConfig: {
        department: '',
        kind: ''
      },
      departments: [],
      kinds: [
        { value: '1', label: '行政' },
        { value: '2', label: '教学' },
        { value: '3', label: '公共' }
      ],
      tableData: [],
      stage_id: this.$route.params.id,
      configList: [
        {
          title: '父级项目信息',
          isFormList: false,
          pageHeader: true,
          prjStateConfig: {
            prjState: {},
            auditLog: []
          },
          formConfig: {
            class: 'yl-form-item-inline__content',
            formData: {
              nns_code: '',
              nns_name: '',
              nns_kind: ''
            },
            columns: [
              {
                type: 'input',
                label: '父级项目编号',
                prop: 'nns_code',
                disabled: true,
                spanWidth: 8
              },
              {
                type: 'input',
                label: '父级项目名称',
                prop: 'nns_name',
                disabled: true,
                spanWidth: 8
              },
              {
                type: 'input',
                label: '父级项目类型',
                prop: 'nns_kind',
                disabled: true,
                spanWidth: 8
              }
            ]
          }
        },
        {
          title: '预算填报',
          isFormList: true,
          formConfig: {
            class: 'yl-form-item-inline__content',
            changeId: '',
            btnMethod: ['resolve', 'reject'],
            formData: {
              name: '',
              number: '',
              kind: '',
              money: '',
              uploader_id: '',
              additional_file: '',
              additional_content: '',
              additional_file_url: ''
            },
            columns: [
              {
                type: 'input',
                label: '预算项目名称',
                prop: 'name',
                disabled: true,
                spanWidth: 12
              },
              {
                type: 'input',
                label: '数量',
                prop: 'number',
                disabled: true,
                spanWidth: 12
              },
              {
                type: 'select',
                label: '项目类型',
                prop: 'kind',
                disabled: true,
                spanWidth: 12,
                options: [
                  { value: '1', label: '行政' },
                  { value: '2', label: '教学' }
                ]
              },
              {
                type: 'input',
                label: '预算项目金额',
                prop: 'money',
                disabled: true,
                spanWidth: 12
              },
              {
                type: 'select',
                label: '申报人',
                prop: 'uploader_id',
                spanWidth: 12,
                disabled: true,
                options: []
              },
              {
                type: 'upload',
                isNormal: true,
                listType: '',
                action: this.GLOBAL.HTTP_URL + '/resource/upload',
                limit: 1,
                accept: '.xlsx, .xls',
                spanWidth: 24,
                label: '附加文件',
                disabled: true,
                prop: 'additional_file'
              },
              {
                type: 'textarea',
                label: '附加信息',
                disabled: true,
                prop: 'additional_content'
              }
            ],
            stateApi: 'this.$ylapi.budgetAudit'
          }
        }
      ]
    }
  },
  created () {
    this.initTree()
  },
  methods: {
    // 金额初始化
    showMoney (value) {
      let num = value
      if (typeof value !== 'number') {
        num = Number.parseFloat(num)
      }
      return num.toFixed(2) + '元'
    },
    // 初始化数据列表
    initTree () {
      this.loading = true
      this.searchConfig = this.initForm(this.searchConfig, ['stage_id'])
      this.getDepartList()
      this.initData()
    },

    // 初始化数据
    async initData () {
      this.loading = true
      let data = await this.$ylapi.getExamineTree({
        stage_id: this.stage_id,
        ...this.searchConfig
      })
      this.tableData = data
      this.loading = false
    },

    // 获取系别
    async getDepartList () {
      this.departments = initSelectValue(
        await this.$ylapi.getDepartList()
      )
    },

    // 审核界面 及查看详情界面
    async goToWritePage (id, state, showStage) {
      this.configList[1].formConfig.changeId = id
      let { self, parent, audit_log } = await this.$ylapi.getSingleBudgetAuditPrjInfo(id)
      this.configList[0].prjStateConfig.prjState = getPrjState(state)
      this.configList[0].prjStateConfig.auditLog = audit_log
      if (showStage) {
        this.configList[1].formConfig.btnMethod = []
      }
      // 父级信息及对应
      let parentInfo = {
        'nns_code': parent.nns_code,
        'nns_name': parent.nns_name,
        'nns_kind': getProjectKind(parent.nns_kind)
      }
      cardFormConfigValue(this.configList, parentInfo, 0)
      // 个人信息及对应
      let selfInfo = {
        'name': self.nns_name,
        'number': self.nns_number,
        'kind': self.nns_kind,
        'money': self.nns_money,
        'uploader_id': self.nns_uploader_id,
        'additional_file': self.nns_additional_file,
        'additional_content': self.nns_additional_content,
        'additional_file_url': self.nns_additional_file_url
      }
      cardFormConfigValue(this.configList, selfInfo, 1)
      let query = {
        'configList': this.configList
      }
      this.$router.push({
        path: `/writePage/${id}`,
        query: {
          data: JSON.stringify(query)
        }
      })
    }
  }
}
</script>
